
<ion-row>
  <ion-col size-xs="3" size-sm="2">
    <div class="canvas-container true-center" #canvasContainer></div>
  </ion-col>

  <ion-col>

    <ion-row>
      <ion-col class="vertical-center ion-hide-sm-down">
        <ion-button [color]="item.itemClass" 
                    [disabled]="shouldDisable()" 
                    (click)="itemMenu.emit($event)"
                    size="small"
                    class="type-name">
          <ion-icon slot="start" 
                    color="light"
                    [src]="'assets/icon/action-lock.svg'" 
                    *ngIf="showLock && item.locked"></ion-icon>
          {{ slot }}
        </ion-button> 

        <span class="score-percent">
          ({{ item.score > 0 ? (item.score / item.baseScore * 100).toFixed(2) + '%' : '0%' }})
        </span>

        <span class="item-name">
          {{ item.enchantLevel > 0 ? '+' + item.enchantLevel : '' }} {{ item.name }}
          <br>
          <span class="found-at" *ngIf="item.foundAt">
            Found {{ item.foundAt | date:'medium' }}
          </span>
        </span>

      </ion-col>

      <ion-col class="ion-hide-sm-up">
        <ion-button [color]="item.itemClass" 
                    [disabled]="shouldDisable()" 
                    (click)="itemMenu.emit($event)"
                    size="small"
                    class="type-name">
          <ion-icon slot="start" 
                    color="light"
                    [src]="'assets/icon/action-lock.svg'" 
                    *ngIf="showLock && item.locked"></ion-icon>
          {{ slot }}
        </ion-button> 

        <span class="score-percent">
          ({{ item.score > 0 ? (item.score / item.baseScore * 100).toFixed(2) + '%' : '0%' }})
        </span>

        <br>
        <br>

        <div class="item-name">
          {{ item.enchantLevel > 0 ? '+' + item.enchantLevel : '' }} {{ item.name }}
          <br>
          <span class="found-at" *ngIf="item.foundAt">
            Found {{ item.foundAt | date:'medium' }}
          </span>
        </div>

      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col size-xs="6"
               size-md="4" 
               *ngFor="let stat of ['str', 'int', 'dex', 'agi', 'con', 'luk', 'hp', 'xp', 'gold']; let i = index" 
               [class.ion-hide]="i > 5 && !item.stats[stat]"
               class="vertical-center">
        <ion-icon class="stat-icon" [src]="'assets/icon/stat-' + stat + '.svg'"></ion-icon>
              
        <ion-label [color]="item.stats[stat] > 0 ? 'success' : (item.stats[stat] < 0 ? 'danger' : '')">
          <strong class="stat-fixed-width">{{ stat.toUpperCase() }}</strong> {{ (item.stats[stat] || 0) | number }}
        </ion-label>
      </ion-col>
    </ion-row>

  </ion-col>
</ion-row>
